
<div class="contact-section section-padding">
  <div class="contact-form-header section-header">
    <h2>联系方式</h2>
    <div class="subtitle">contact information</div>
  </div>
  <div class="contact-info">

    <div class="contact-info-item">
      <div class="contact-info-icon">
        <img src="/images/icons/telphone.png" alt="电话" onerror="this.onerror=null;this.src='images/placeholder.png';">
      </div>
      <div class="contact-info-title-en">PHONE</div>
      <div class="contact-info-title-cn">电话</div>
      <div class="contact-info-detail">138-8888-8888</div>
    </div>
    <div class="contact-info-item">
      <div class="contact-info-icon">
        <img src="/images/icons/email.png" alt="邮箱" onerror="this.onerror=null;this.src='images/placeholder.png';">
      </div>
      <div class="contact-info-title-en">EMAIL</div>
      <div class="contact-info-title-cn">邮箱</div>
      <div class="contact-info-detail">zhencheng@163.com</div>
    </div>
    <div class="contact-info-item">
      <div class="contact-info-icon">
        <img src="/images/icons/website.png" alt="官网" onerror="this.onerror=null;this.src='images/placeholder.png';">
      </div>
      <div class="contact-info-title-en">WEBSITE</div>
      <div class="contact-info-title-cn">官网</div>
      <div class="contact-info-detail">www.zhencheng.com</div>
    </div>
  </div>
</div>
<div class="contact-form-section section-padding">
  <div class="contact-form-header section-header">
    <h2>在线留言</h2>
    <div class="subtitle">ADVANTAGE</div>
  </div>
  <form class="contact-form">
    <div class="contact-form-left">
      <input type="text" placeholder="请输入姓名" required>
      <input type="text" placeholder="请输入电话" required>
      <button type="submit" class="contact-form-btn">点击留言</button>
    </div>
    <div class="contact-form-right">
      <textarea placeholder="请输入留言信息" required></textarea>
    </div>
  </form>
</div>


</script>
<style>
  .contact-info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 100rem;
    margin: auto;
  }

  .contact-info-item {
    text-align: center;
    flex: 1 1 0;
    position: relative;
  }

  .contact-info-icon {
    width: 7rem;
    height: 7rem;
    margin: 0 auto 0.2rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-info-icon img {
    width: 7rem;
    object-fit: contain;
  }

  .contact-info-title-en {
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    opacity: 0.08;
    position: absolute;
    margin: auto;
    z-index: 1;
    left: 0;
    right: 0;
    top:6.1rem;
  }

  .contact-info-title-cn {
    position: relative;
    z-index: 2;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.5rem;
    text-align: center;
    color: #333;

  }

  .contact-info-detail {
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6rem;
    color: #888;
    margin-bottom: 0.3125rem;
  }


  /* 联系方式 在线留言 */
  .contact-form-section {
    background: #F7F8F8;
  }

  .contact-form {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.875rem;
    max-width: 100rem;
    margin: 0 auto;
  }

  .contact-form-left {
    flex: 0 0 18.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .contact-form-left input {
    border: none;
    width: 25rem;
    height: 4.375rem;
    border-radius: 0.625rem;
    background: #fff;
    font-weight: 400;
    font-size: 1.25rem;
    padding: 0 2.5rem;
  }

  .contact-form-left input:focus {
    outline: 0.125rem solid #0e78ff;
  }

  .contact-form-left input::placeholder,
  .contact-form-right textarea::placeholder {
    color: #999;
    opacity: 1;
  }

  /* 兼容部分浏览器 */
  .contact-form-left input::-webkit-input-placeholder,
  .contact-form-right textarea::-webkit-input-placeholder {
    color: #999;
  }

  .contact-form-left input:-ms-input-placeholder,
  .contact-form-right textarea:-ms-input-placeholder {
    color: #999;
  }

  .contact-form-left input::-ms-input-placeholder,
  .contact-form-right textarea::-ms-input-placeholder {
    color: #999;
  }

  .contact-form-right {
    flex: 1 1 0;
  }

  .contact-form-right textarea {
    border: none;
    padding: 1.375rem 2.5rem;
    width: 100%;
    height: 15.625rem;
    border-radius: 0.625rem;
    background: #fff;
    font-size: 1.25rem;
    resize: vertical;
    box-sizing: border-box;

  }

  .contact-form-right textarea:focus {
    outline: 0.125rem solid #0e78ff;
  }

  .contact-form-btn {

    height: 4.375rem;
    border-radius: 0.625rem;
    border: none;
    width: 100%;
    background: #0e78ff;
    transition: background 0.2s;
    font-size: 1.125rem;
    color: #fff;
  }

  .contact-form-btn:hover {
    background: #0052cc;
  }

  /* 响应式布局 */
  @media (max-width: 75rem) {
    .contact-form-left input {
      width: 100%;
    }
    
    .contact-form {
      padding: 0 1.25rem;
    }

    .section-header {
      margin-bottom: 2rem;
    }
  }

  @media (max-width: 56.25rem) {
    .contact-info {
      flex-direction: column;
      gap: 2rem;
      padding: 0 1rem;
      margin-bottom: 2rem;
    }

    .contact-info-item {
      width: 100%;
    }

    .contact-info-icon {
      width: 6rem;
      height: 6rem;
      margin-bottom: 0.75rem;
    }

    .contact-info-icon img {
      width: 3rem;
    }

    .contact-info-title-en {
      font-size: 1.75rem;
      top: 5.5rem;
    }

    .contact-info-title-cn {
      font-size: 1.25rem;
      line-height: 1.75rem;
      margin-bottom: 0.5rem;
    }

    .contact-info-detail {
      font-size: 1rem;
      line-height: 1.5rem;
    }

    .contact-form {
      flex-direction: column;
      gap: 1rem;
      padding: 0 1rem;
    }

    .contact-form-left,
    .contact-form-right {
      width: 100%;
    }

    .contact-form-left input {
      width: 100%;
      height: 3.25rem;
      font-size: 1rem;
      padding: 0 1rem;
      border-radius: 0.5rem;
    }

    .contact-form-right textarea {
      height: 9rem;
      font-size: 1rem;
      padding: 0.875rem 1rem;
      border-radius: 0.5rem;
    }

    .contact-form-btn {
      height: 3.25rem;
      font-size: 1rem;
      border-radius: 0.5rem;
    }
  }

  @media (max-width: 30rem) {
    .contact-info {
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .contact-info-icon {
      width: 4.5rem;
      height: 4.5rem;
      margin-bottom: 0.5rem;
    }

    .contact-info-icon img {
      width: 2.25rem;
    }

    .contact-info-title-en {
      font-size: 1.25rem;
      top: 3.75rem;
    }

    .contact-info-title-cn {
      font-size: 1.125rem;
      line-height: 1.5rem;
      margin-bottom: 0.25rem;
    }

    .contact-info-detail {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }

    .contact-form {
      gap: 0.75rem;
    }

    .contact-form-left {
      order: 2;
    }

    .contact-form-right {
      order: 1;
    }

    .contact-form-left input,
    .contact-form-right textarea {
      font-size: 0.875rem;
      border-radius: 0.375rem;
    }

    .contact-form-left input {
      height: 2.75rem;
      padding: 0 0.875rem;
    }

    .contact-form-right textarea {
      height: 7rem;
      padding: 0.75rem 0.875rem;
    }

    .contact-form-btn {
      height: 2.75rem;
      font-size: 0.875rem;
      margin-top: 0.5rem;
    }

    .section-header {
      margin-bottom: 1.25rem;
    }

    .section-header h2 {
      font-size: 1.25rem;
      margin-bottom: 0.25rem;
    }

    .section-header .subtitle {
      font-size: 0.75rem;
    }
  }

  /* 地图容器样式 */
  #map {
    width: 100%;
    height: 31.25rem;
  }

  @media (max-width: 48rem) {
    #map {
      height: 12.5rem;
    }
  }

  @media (max-width: 30rem) {
    #map {
      height: 10rem;
    }
  }
</style>
